<div class="row-content am-cf">
	<div class="row">
		<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
			<div class="widget am-cf">
				<div class="widget-head am-cf">
					<div class="widget-title am-fl">新增配置</div>
					<div class="widget-function am-fr">
						<a href="javascript:;" class="am-icon-cog"></a>
					</div>
				</div>
				<div class="widget-body am-fr">
					<form class="am-form tpl-form-line-form" id="configForm"
						method="post">
						<div class="am-form-group">
							<label for="type" class="am-u-sm-2 am-form-label">类型 <span
								class="tpl-form-line-small-title">type</span>
							</label>
							<div class="am-u-sm-10">
								<label class="am-radio-inline">
									 <input type="radio" value="1" name="type" checked="checked" /> 七牛云
								</label> 
								<label class="am-radio-inline"> 
									<input type="radio" name="type" value="2" /> 阿里云
								</label> 
								<label class="am-radio-inline"> 
									<input type="radio" name="type" value="3" /> 腾讯云
								</label>
							</div>
						</div>
						<div class="am-form-group" id="cosAppId" style="display: none">
							<label for="appid" class="am-u-sm-2 am-form-label">appid
								<span class="tpl-form-line-small-title">AppId</span>
							</label>
							<div class="am-u-sm-10">
								<input type="text" id="appid" class="tpl-form-input"
									placeholder="请输入AppId" name="appid" />
							</div>
						</div>
						<div class="am-form-group">
							<label for="domain" class="am-u-sm-2 am-form-label">访问地址
								<span class="tpl-form-line-small-title">domain</span>
							</label>
							<div class="am-u-sm-10">
								<input type="text" id="domain" class="tpl-form-input"
									placeholder="请输入访问地址" name="domain" required="required" />
							</div>
						</div>

						<div class="am-form-group">
							<label for="cosPath" class="am-u-sm-2 am-form-label">文件路径
								<span class="tpl-form-line-small-title">cosPath</span>
							</label>
							<div class="am-u-sm-10">
								<input type="text" id="cosPath" class="tpl-form-input"
									placeholder="路径必须从bucket下的根/开始,文件路径以/结尾, 例如 /mytest/"
									name="cosPath" required="required" />
							</div>
						</div>

						<div class="am-form-group">
							<label for="endpoint" class="am-u-sm-2 am-form-label">所在的区域
								<span class="tpl-form-line-small-title">endpoint</span>
							</label>
							<div class="am-u-sm-10">
								<input type="text" id="endpoint" class="tpl-form-input"
									placeholder="腾讯云所在区域比如广州(gz),七牛云华南Zone.zone2(),阿里云华南http://oss-cn-shenzhen.aliyuncs.com" name="endpoint" required="required" />
							</div>
						</div>

						<div class="am-form-group">
							<label for="bucket" class="am-u-sm-2 am-form-label">bucket名称
								<span class="tpl-form-line-small-title">bucket</span>
							</label>
							<div class="am-u-sm-10">
								<input type="text" id="bucket" class="tpl-form-input"
									placeholder="请输入bucket名称" name="bucket" required="required" />
							</div>
						</div>

						<div class="am-form-group">
							<label for="accessKey" class="am-u-sm-2 am-form-label">accessKey
								<span class="tpl-form-line-small-title">accessKey</span>
							</label>
							<div class="am-u-sm-10">
								<input type="text" id="accessKey" name="accessKey"
									placeholder="请输入accessKey" />
							</div>
						</div>

						<div class="am-form-group">
							<label for="secretKey" class="am-u-sm-2 am-form-label">secretKey
								<span class="tpl-form-line-small-title">secretKey</span>
							</label>
							<div class="am-u-sm-10">
								<input type="text" id="secretKey" name="secretKey"
									placeholder="请输入secretKey" />
							</div>
						</div>

						<div class="am-form-group">
							<label for="user-intro" class="am-u-sm-2 am-form-label">是否默认</label>
							<div class="am-u-sm-10">
								<!-- <div class="tpl-switch">
									<input type="checkbox"
										class="ios-switch bigswitch tpl-switch-btn am-margin-top-xs"
										name="isDefault" value="" />
									<div class="tpl-switch-btn-view">
										<div></div>
									</div>
								</div> -->
								<label class="am-radio-inline"> 
									<input type="radio" name="isDefault" value="1" /> 是
								</label> 
								<label class="am-radio-inline"> 
									<input type="radio" name="isDefault" value="2" checked="checked"/> 否
								</label>

							</div>
						</div>

						<div class="am-form-group">
							<div class="am-u-sm-10 am-u-sm-push-2">

								<button type="button" onclick="return doSubmit();"
									class="am-btn am-btn-primary tpl-btn-bg-color-success ">提交</button>
								<button type="button" onclick="loadPage('config/listUI')"
									class="am-btn am-btn-success tpl-btn-bg-color-success ">返回</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

</div>
<script th:inline="javascript">
	<![CDATA[
	$(":radio").click(function() {
		var value = $(this).val();
		if (value == 3) {
			$("#cosAppId").css('display', 'block');
		} else {
			$("#cosAppId").css('display', 'none');
		}
	});

	$('select').selected();
	validateUserForm();
	var valdater;
	function validateUserForm() {
		valdater = $('#configForm').validate({
			errorElement : 'span',
			errorClass : 'am-icon-times',
			focusInvalid : true,
			onkeyup : false,
			ignore : "",
			rules : {
				domain : {
					required : true,
					url : true
				},
				cosPath : {
					required : true,
				},
				endpoint : {
					required : true
				},
				bucket : {
					required : true
				},
				accessKey : {
					required : true
				},
				secretKey : {
					required : true
				},
			},
			messages : {
				domain : {
					required : "请输入访问地址",
					url : "必须填写正确的网址地址"
				},
				cosPath : {
					required : "请输入文件路径",
				},
				endpoint : {
					required : "请所在区域",
				},
				bucket : {
					required : "请输入bucket名称",
				},
				accessKey : {
					required : "请输入accessKey",
				},
				secretKey : {
					required : "请输入secretKey",
				},
			}
		});
	}
	function doSubmit() {
		if (valdater.form()) {
			commit('configForm', 'config/save', 'config/listUI');
			return true;
		}
		return false;
	}

	]]>
</script>